﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Category.aspx.cs" Inherits="ZLCMS.Web.Wap.Shop.Category"  MasterPageFile="~/Wap/Shop/ShopSite.Master"%>
<%@ Register src="Footer.ascx" tagname="Footer" tagprefix="uc1" %>
<%@ Register src="UC_ShopNavBar.ascx" tagname="UC_ShopNavBar" tagprefix="uc2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>商品目录</title>  
    <script type="text/javascript" src="/wap/lib/iscroll-5/iscroll.js"></script>
    <link href="css/CategoryFixed.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="pages" runat="server">
    <!--S page -->
<div data-role="page" id="mypage">

	<!--S header -->
	<div data-role="header" data-position="fixed" data-tap-toggle="false">
	        <uc2:UC_ShopNavBar ID="UC_ShopNavBar1" runat="server" />
	</div>
    <!--E header -->
	
    <!--S content -->
	<div role="main" class="ui-content storedefault ">

        <div class="classify">
     <!--父级-->
            <div id="wrapper1">
                <ul id="wrapp">
                </ul>
            </div>
        </div>

        <div class="content_wrapper">
            <div class="content_item">
            </div>
        </div>
       
 	</div>
    <!--E content -->
	
    <!--S footer -->
	<div data-role="footer" data-position="fixed" data-tap-toggle="false">
                <uc1:Footer ID="Footer1" runat="server"  MenuId="C" />    
    </div>
    
    <script src="/wap/lib/common/listviewHandler.js" type="text/javascript"></script>
    <script src="/Wap/lib/jquery_lazyload/jquery.lazyload.min.js" type="text/javascript"></script>
    <script>
        var _hmt = _hmt || [];
    </script>
    <script type="text/jscript">
    
    $(document).ready(function () {
        $.cookie('After', $.cookie('CurrentPage'));
        $.cookie('CurrentPage', 'category');
        var After = $.cookie('After');
        var Current = $.cookie('CurrentPage');
        //保存统计记录
        var path = 'pay|path|' + Current + '|' + After;
        _hmt.push(['_trackEvent', path, 'enter', 'category'])
        _hmt.push(['_trackEvent', 'page', 'view', 'category'])
    });

        var ParentRoot = 68;
        var ClickNavIndex = '';
        var DataList = [];

        $(function () {
            queryData(ParentRoot);
        });
          
        function queryData(root) {
            var item = {};
            item.kids = [];
            item.Parent = "";

            //左侧导航
            var itemTemplate = '<li>' +
                            '<a href="javascript:void(0); " data-Id="{Id}" data-ajax="false">' +
                           '<p>{Name}</p>' +
                            ' </a>' +
                        ' </li>';
            var handler = $('#wrapp').listviewHandler();
            handler.initialize({
                loaderBtn: $('#moreBtn'), //加载数据按钮（点击加载下一页）
                pageIndex: 1, //页码（从1起算）
                emptyHtml:'',
                pageSize: 20, //页大小
                totalCount: 999, //总记录数
                itemHandler: function (data, itemTemplate, container) {//数据各项处理
                    if (item.Parent == data.Parent) {
                        handler.html(item.kidshtml);
                    }
                },
                beforeHandleResult: function (result, totalCount, container) {
                    item.kidshtml = "";
                    $(result.List).each(function () {
                        var parent = this;
                        parent.ImgUrl = firstThumbnail(parent.ImgUrl)
                        if (parent.Parent == ParentRoot && parent.Parent != 0) {
                                item.kidshtml += itemTemplate.format(parent);
                        }else{
                                DataList.push(parent);
                        }
                    })
                    $('#wrapp').html(item.kidshtml)
                },
                afterHandleResult: function (result, totalCount, container) {
                    setTimeout(function () {
                        var Scroll1 = new iScroll('wrapper1', {
                            scrollbars: true,
                            fadeScrollbars: false,
                            scrollbars:false
                        });
                    }, 1000);
                    $("#wrapper1 ul li").css({
                        "float": "inherit",
                        "width": "auto",
                    })

                    $("#wrapper1").height($(window).innerHeight() - 89);
                    $("#wrapper1 ul li:first").attr("data-one", "one");
                    $("#wrapper1 ul li").unbind("click").bind("click", function () {
                        $(this).addClass('active').siblings().removeClass('active')
                        ClickNavIndex = $(this).index();
                        $.cookie("ClickNavIndex",'')
                        $.cookie("ClickNavIndex",ClickNavIndex);
                        var id = parseInt($(this).find('a').attr("data-Id"));
                        LoadList(id)
                    });

                    if (ParentRoot == root) {
                        if(!$.cookie('ClickNavIndex') == 0){
                            CookNav =$.cookie('ClickNavIndex');
                            $("#wrapper1 ul li:eq("+CookNav+")").click();
                        }else{
                            $("#wrapper1 ul li:first").click();
                        }
                    }

                },
                command: 'Pub.LoadProductCategory',
                parameter: { Root: root }
            });
            handler.nextPage();
        }

    function LoadList(Id){
        var RightNav = '';
        var RightList = '';
        $('.content_item').html('');

        //右侧小导航
        var RightNavitem = '<h2 class="content_title"><i></i> <font data-Id="{Id}">{Name}</font></h2>';
        //右侧小号航下的产品
        var cagetoryLi = '<li>' +
                                '<a href="{Url}" data-ajax="false">' +
                                '<div><img src="{ImgUrl}" class="pimgc"/></div>' +
                                '<p>{Name}</p>' + ' </a>' +
                         '</li>';
        $(DataList).each(function () {
            RightList ='';
            if(this.Parent == Id){
                RightNav = RightNavitem.format(this);
                var nextitem = this.Id;
                $(DataList).each(function () {
                     if(this.Parent == nextitem){
                        RightList += cagetoryLi.format(this);
                     }
                })
                contentDiv = '<div class="content_itemList">'+RightNav+'<ul class="recommends_list">'+RightList+'</ul></div>';
                $('.content_item').append(contentDiv)
            }
        });
        $('img.pimgc').lazyload({
            event: 'scrollstop'
        });
    }
    </script>

</div>
<!--E page -->
</asp:Content>